<template>
  <el-container>
    <!-- 这是快递取派件工作范围 -->
    <el-header>
      <el-menu  class="el-menu-demo"  mode="horizontal" >
        <el-menu-item index="1" ><img class="a" src="../tlc/img/快递 (1).png" /></el-menu-item>
        <el-menu-item index="0" class="z"><router-link :underline="false" to="/kdypickup"><span class="zt">首页</span></router-link></el-menu-item>
        <div class="dd">快速登录/注册</div>
      </el-menu>
      <div class="line"></div>
    </el-header>

    <el-menu  class="wc"  mode="horizontal"  background-color="#324f94"  text-color="#fff" active-text-color="#a0d919" style="width: 100%" >
      <el-menu-item index="4" class="a1"><router-link :underline="false" to="/kdypickup"><img class="a" src="../tlc/img/004-查快递 (1).png" /><span class="zt" >快递员的取件</span ></router-link ><span></span ></el-menu-item>
      <el-menu-item index="4" class="a2"><router-link :underline="false" to="/kdysend" ><img class="a" src="../tlc/img/002-快递箱 (1).png" /><span class="zt" ></span>快递派送</router-link ><span></span ></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdycomputation"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">查看货物是否填写进行计量</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdyworkingRange"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">取派件工作范围</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdyinformation"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">快递员个人信息</span></router-link><span></span></el-menu-item>
    </el-menu>

    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="递取派件工作范围" name="second" class="boxMainA">
        <div id="zxc">
          <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content1 bg-purple1">
          <div class="ztbox">
                <h3 class="zy">作业范围</h3>
                 <div class="findAAA">
                  <el-button type="success" @click="onSubmitFindWork">查询我的工作区域范围</el-button>
                </div>
          </div>

          <div class="mapbox">
              <baidu-map
                :center="center"
                :zoom="zoom"
                :map-click="false"
                @mousemove="syncPolygon"
                @ready="handler"
                style="height:650px;width:978px;"
                @click="paintPolygon"
                @rightclick="newPolygon"
              >
                <bm-polygon
                  :path="path"
                  v-for="path of polygonPath.paths"
                  :key="path.toString()"
                  stroke-color="red"
                  fill-color="silver"
                  :fill-opacity="0.5"
                  :stroke-opacity="0.5"
                  :stroke-weight="2"
                  @click="alertpath"
                  :editing="editing" 
                  @lineupdate="updatePolygonPath" 
                />
              </baidu-map>
            </div>
            </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
        formWorkRange: {user: ''},
        activeName: "second",//蓝色横杠
        //name1:"",
        xx:[],
        tMechanismId:'',
        tMechanismBusinessrange:'',
        name: 'Polygon',
        haha: '百度地图',
        center: { lng: 116.412732, lat: 39.911707 },
        zoom: 13,
        editing: false,
        polygonPath: {
        editing: false,
        paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
        },
        dtqy:"",
        data: [],
        defaultProps: {
          children: 'children',
          label: 'cliqueName'
        }
    };
  },
 
      methods:{
        //工区域范围的查询找
        onSubmitFindWork() {
          axios.get("api/findKDYworkRange?usersAccountNumber="+JSON.parse(sessionStorage.getItem("user"))).then((res) =>{
             //console.log(res.data)
             if(res.data.networkTmsScopeEmployee.scopeEmployeeLatitudeAndLongitudeArray!=null || res.data.networkTmsScopeEmployee.ipAddressLatitude!=null){
              alert("进来了")
                this.dtqy=res.data.networkTmsScopeEmployee.ipAddressLatitude.split(",");
                this.center.lng = this.dtqy[0];
                this.center.lat = this.dtqy[1];
                var bb=res.data.networkTmsScopeEmployee.scopeEmployeeLatitudeAndLongitudeArray.split(",");
                this.xx=bb;
                var map_points1=[];
                for (let i = 0; i < this.xx.length; i++) {
                map_points1.push(new window.BMap.Point(this.xx[i],this.xx[i+1]))
                //console.log(this.xx[i],this.xx[i+1])
                i++;
                }
                this.polygonPath.paths.push(map_points1)
                //console.log(this.polygonPath.paths)
                this.tMechanismBusinessrange = this.polygonPath.paths
              }else{
                this.quxiao()
              }
            //console.log("成功了")
          })
      },
        },
    handler ({ BMap, map }) {
      //console.log(BMap, map)
      map.enableScrollWheelZoom(true)
      // map.centerAndZoom('青岛市', 13)
    },
}
</script>
<style scoped>
.findAAA{position: relative;left: 498px;top: -22px; }
#zxc{position: relative;top: 20px;}
.mapbox{
    position: relative;
    top: 10px;
    left: 10px;
}
.ztbox{
    color: #081123;
    background: hwb(202 85% 3%);
    border-radius: 9px;
    height: 45px;
    width: 800px;
}
*{
		margin: 0px;
	}
.el-row {
    margin-bottom: 20px;
   }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #f9fafc;
  }
  .grid-content1 {
    border-radius: 4px;
    min-width: 600px;
    min-height: 500px;
    opacity: 0.85;
  }
  .ts{
    position: relative;
    left: 80px;
    color: red;
    top: 5px;
  }
  .zy{
    position: relative;
    top: 10px;
  }
   .bg-purple1 {
    background: #f9fafc;
    border-radius: 9px;
  }
.w {
  width: 1200px;
  height: 310px;
  position: relative;
  left: 20px;
  margin: -10px auto;
  text-align: center;
}
.z {
  font-size: 18px;
  color: #000;
}
.a1 {
  position: relative;
  left: 130px;
}
.a2 {
  position: relative;
  left: 220px;
}
.a3 {
  position: relative;
  left: 320px;
}
.dd {
  text-align: right;
}
.a {
  margin: -17px auto;
  left: 50%;
}
.el-container {
  margin: -10px auto;
  margin-left: -10px;
  margin-right: -10px;
}
.boxMainA {
  width: 1000px;
  height: 440px;
  margin: -10px auto;
  text-align: center;
  position: relative;
  top: 10px;
}
</style>